.page {
  position: relative;
  height: auto;
  min-height: 100%;
  z-index: 5;
  padding-bottom: 60rpx;
}

.cover {
  position: fixed;
  top: var(--window-top);
  left: 0;
  width: 100%;
  z-index: -1;
}

.box {
  padding: 30rpx;
}

.inline {
  display: inline-block;
}

// 定位
.header {
  position: fixed;
  top: var(--window-top);
  left: 0;
  width: 100%;
  z-index: 10;
}

.footer {
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  width: 100%;
  z-index: 10;
}

.sticky {
  position: sticky;
  top: var(--window-top);
  left: 0;
  z-index: 10;
}

.abs {
  position: absolute;
  z-index: 10;
}

.rel {
  position: relative;
  z-index: 5;
}

.fixed {
  position: fixed;
  z-index: 10;

  &--br {
    right: 30rpx;
    bottom: 200rpx;
  }
}

.full {
  position: fixed;
  top: var(--window-top);
  left: 0;
  width: 100%;
  height: calc(100% - var(--window-top) - var(--window-bottom));
  z-index: 10;

  &--abs {
    @extend .abs;
  }
}

// Flex布局
.flex {
  display: flex;

  &--inline {
    display: inline-flex;
  }
}

@for $i from 1 to 13 {
  .flex-#{$i} {
    flex-grow: #{$i};
  }
}

.flex-fs-0 {
  flex-shrink: 0;
}

.flex-col {
  flex-flow: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-rl {
  justify-content: flex-start;
}

.flex-rc {
  justify-content: center;
}

.flex-rr {
  justify-content: flex-end;
}

.flex-rb {
  justify-content: space-between;
}

.flex-ct {
  align-items: flex-start;
}

.flex-cc {
  align-items: center;
}

.flex-cb {
  align-items: flex-end;
}

.flex-center {
  @extend .flex-rc, .flex-cc;
}
